<template>
  <el-config-provider :locale='zhCn'>
    <div class="appCoat">
      <router-view id="theRouterView" class="theRouterView"></router-view>
      <div class="fullScreen" @click="fullscreen"></div>
    </div>
  </el-config-provider>
  <el-config-provider :locale='zhCn'>
    <div class="appCoat">
      <router-view id="theRouterView" class="theRouterView"></router-view>
      <div class="fullScreen" @click="fullscreen"></div>
    </div>
  </el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { onMounted } from 'vue';

onMounted(() => {
  // const test = JSON.parse(JSON.stringify(import.meta.env.TEST_STRING));
  // console.log(typeof Number(import.meta.env.VITE_TEST_CONST), 'VITE_TEST_CONST=1')
  // console.log(typeof Boolean(import.meta.env.VITE_TEST_BOOL), 'VITE_TEST_BOOL=true')
  // console.log(typeof import.meta.env.VITE_TEST_BOOL, 'VITE_TEST_BOOL=true')
})

const fullscreen = () => {
  if (document.fullscreenElement == null) {
    openFullscreen();
  } else if (document.fullscreenElement) {
    exitFullscreen();
  }
};

const openFullscreen = () => {
  const full = document.getElementById('app')
  if (full.requestFullscreen) {
    full.requestFullscreen();
  } else if (full.mozRequestFullscreen) {
    full.mozRequestFullscreen();
  } else if (full.msRequestFullscreen) {
    full.msRequestFullscreen();
  }
};
const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullscreen) {
    document.mozCancelFullscreen();
  } else if (document.webkitExitFullScreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullScreen) {
    document.msExitFullscreen();
  }
};
</script>
<style scoped>
.fullScreen {
  width: 26px;
  height: 64px;
  background-image: url('./assets/images/fullScreen.png');

  position: fixed;
  right: 0px;
  top: 400px;
}

.appCoat {
  height: 100vh;
  width: 100vw;
}

.theRouterView {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
</style>